<!-- 
此组件初始化时不会自动加载数据，请在mounted中 this.$refs.[].initData()
如果放在dialog里面的吗，请在dialog的open事件中用this.$nextTick进行加载
 -->
<template>
  <div>
    <list id-key="id" ref="list" :disabled="disabled" :show-query="showQuery" :show-checkbox="showCheckbox" show-index
      :query-params="queryParams" show-summary expand-query page @get-data="onGetData" :data="data" :total="total"
      :summary-data="summaryData" custom-get-data>
      <template #toolbar-left>
        <slot name="toolbar-left"></slot>
      </template>
      <template #query>
        <el-form-item label="分发日期">
          <el-row style="width:300px">
            <el-col :span="11">
              <el-form-item>
                <el-date-picker v-model.trim="queryParams.allocationTimeBegin" placeholder="开始日期"
                  value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2">至</el-col>
            <el-col :span="11">
              <el-form-item>
                <el-date-picker v-model.trim="queryParams.allocationTimeEnd" placeholder="结束日期" value-format="yyyy-MM-dd"
                  style="width: 100%"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="分发公司">
          <el-select v-model="queryParams.companyIds" clearable multiple filterable collapse-tags class="_company-select">
            <el-option v-for="item in companyData" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="queryParams.types" clearable multiple collapse-tags class="_type-select">
            <el-option label="普通公海池" :value="0"></el-option>
            <el-option label="优质公海池" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template #column>
        <el-table-column prop="allocationTime" width="150" label="分发日期" sortable>
          <template v-slot="{ row }">
            <span>{{ row.allocationTime | toDateString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" min-width="180" label="分发公司" sortable />
        <el-table-column prop="total" width="150" label="当日分发成功数量" sortable>
          <template #default="{ row }">
            <span class="c-link" @click="showAllocationRecordsDialog(row)">{{ row.total }}</span>
          </template>
        </el-table-column>
      <el-table-column prop="claimTotal" width="150" label="当日认领总数" sortable />
      <el-table-column prop="returnTotal" width="150" label="当日人工退回总数" sortable />
        <el-table-column prop="unclaimTotal" width="150" label="当日未认领总数" sortable>
          <!-- <template v-slot="{ row }">
                  <span class="c-link">{{ row.unclaimTotal }}</span>
                </template> -->
        </el-table-column>
        <el-table-column prop="salesmanTotal" width="150" label="当日分发业务员" sortable>
          <template #default="{ row }">
            <span class="c-link" @click="showAllocationUsersDialog(row)">{{ row.salesmanTotal }}</span>
          </template>
        </el-table-column>
        <!-- slot[column] -->
        <slot name="column"></slot>
        <!--/ slot[column]-->
      </template>
    </list>
    <allocationUsersDialog ref="allocationUsersDialog" />
    <allocationRecordsDialog ref="allocationRecordsDialog" /> 
  </div>
</template>
<script>

import list from "@/components/common/list";
import api from "@/api/crm/seaPoolStatistics";
import organizationUnitApi from "@/api/platform/organizationUnit"
import allocationUsersDialog from "./allocationUsersDialog"
import allocationRecordsDialog from "./allocationRecordsDialog"
export default {
  components: {
    list,
    allocationUsersDialog,
    allocationRecordsDialog
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    showQuery: {
      type: Boolean,
      default: true
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    inDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      //查询条件字段
      queryParams: {
        employeeName: "",
        loginName: "",
        roleName: "",
      },
      data: [],
      total: 0,
      summaryData: {},
      companyData: []
    };
  },
  async mounted() {
    //获取公司下拉框数据
    let res = await organizationUnitApi.getList({ types: [4], isDeleted: false });
    let resData = res.data;
    this.companyData = resData;
  },
  methods: {
    async onGetData(params) {
      this.$refs.list.loading(true);
      let res = await api.getPageList(params);
      let resData = res.data;
      this.data = resData.list;
      this.total = resData.total;
      this.summaryData = resData.summary
      this.$refs.list.loading(false);
    },
    reload() {
      this.$refs.list.reload();
    },
    showAllocationUsersDialog(row) {
      this.$refs.allocationUsersDialog.showData({
        allocationTimeBegin: row.allocationTime,
        allocationTimeEnd: row.allocationTime,
        companyIds: [row.companyId],
        types: this.queryParams.types
      })
    },
    showAllocationRecordsDialog(row) {
      this.$refs.allocationRecordsDialog.showData({
        allocationTimeBegin: row.allocationTime,
        allocationTimeEnd: row.allocationTime,
        companyIds: [row.companyId],
        types: this.queryParams.types
      })
    }
  },
};
</script>
<style lang="scss">
._company-select .el-input {
  max-width: none !important;
  width: 220px;
}

._type-select .el-input {
  max-width: none !important;
  width: 180px;
}
</style>